import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  Highcharts: typeof Highcharts = Highcharts;
    //饼状图
    chartOptions1: Highcharts.Options = {
			chart: {
			/* 	plotBackgroundColor: null,
				plotBorderWidth: null,
				plotShadow: false, */
				type: 'pie',
				backgroundColor: "#eee"
			},
			credits:{
				enabled:false   //去掉版权
			},
			title: {
				text: '人口分布图'
			},
			tooltip: {
				pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			},
			plotOptions: {
				pie: {
					allowPointSelect: true,
					cursor: 'pointer',
					dataLabels: {
						enabled: true,
						format: '<b>{point.name}</b>: {point.percentage:.1f} %',
						style: {
							color:  'black'
						}
					}
				}
			},
			series: [{
        type:"pie",   //注意  在angular里面必须配置
				name: '人口数',
				colorByPoint: true,
				data: [{
					name: '深圳',
					y: 6111111,
					sliced: true,
					selected: true
				}, {
					name: '北京',
					y: 8312421
				}, {
					name: '上海',
					y: 5312421
				}, {
					name: '广州',
					y: 4532421
				},]
			}]
		};

    //柱状图
    chartOptions2: Highcharts.Options={
      credits:{
				enabled:false   //去掉版权
			},
			chart: {
				type: 'column'
			},
			title: {
				text: '舆情分布'
			},
			subtitle: {
				text: '数据来源: itying.com'
			},
			xAxis: {
				categories: [
					'一月', '二月', '三月', '四月', '五月', '六月'
				],
				crosshair: true
			},
			yAxis: {
				min: 0,
				title: {
					text: '舆情数'
				}
			},
			tooltip: {
				// head + 每个 point + footer 拼接成完整的 table
				headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
				pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
					'<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
				footerFormat: '</table>',
				shared: true,
				useHTML: true
			},
			plotOptions: {
				column: {
					borderWidth: 0
				}
      },
      // https://api.highcharts.com.cn/#plotOptions
			series: [{
        type:"column",
				name: '正面舆情',
				data: [439, 715, 104, 1292, 144, 176.0]
			}, {
        name: '负面舆情',
        type:"column",
				data: [299, 104, 106.4, 129.2, 144.0, 176.0]
			}]
		}
  constructor() { }

  ngOnInit(): void {
  }

}
